<template>
  <div class="experiment-detail-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="header-title">参数信息</span>
          <el-button class="back-button" @click="commEvent.goBack">返回上一页</el-button>
        </div>
      </template>
      <!-- 样品名称选择 -->
      <el-card class="sample-card">
        <div class="sample-header">样品名称</div>
        <div class="sample-content">
          <el-checkbox-group v-model="forms.sampleType" class="sample-radio-group" @change="commEvent.handleSampleTypeChange">
            <el-checkbox value="1" size="large">是否配液</el-checkbox>
            <el-checkbox value="2" size="large">是否喷涂/烧结</el-checkbox>
            <el-checkbox value="3" size="large">是否XRF检测</el-checkbox>
            <el-checkbox value="4" size="large">是否组装+电化学检测</el-checkbox>
          </el-checkbox-group>
          <div v-if="showChannelSelect" class="sample-select-wrapper">
            <span class="select-label">通道选择：</span>
            <el-select v-model="forms.channel" placeholder="请选择" class="select-input">
              <el-option v-for="option in CHANNEL_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>
          </div>
        </div>
      </el-card>
      <!-- 配方参数 -->
      <el-card v-if="forms.sampleType.includes('1')" class="formula-card">
        <div class="formula-header">
          <span>配方参数：</span>
        </div>
        <div class="formula-content">
          <div v-for="(formula, index) in forms.formulas" :key="formula.id" class="formula-item">
            <div class="formula-title-bar">
              <div class="formula-select-wrapper">
                <span class="formula-number">配方{{ index + 1 }}</span>
                <span class="formula-label">溶剂名称：</span>
                <el-select v-model="formula.soluteName" placeholder="请选择" class="formula-select" filterable clearable>
                  <el-option label="溶液1" value="1" />
                  <el-option label="溶液2" value="2" />
                  <el-option label="溶液3" value="3" />
                  <el-option label="溶液4" value="4" />
                  <el-option label="溶液5" value="5" />
                  <el-option label="溶液6" value="6" />
                  <el-option label="溶液7" value="7" />
                  <el-option label="溶液8" value="8" />
                </el-select>
              </div>
              <div class="formula-actions">
                <el-button v-if="index === forms.formulas.length - 1" type="primary" size="small" @click="commEvent.addFormula">
                  新增
                </el-button>
                <el-button
                  v-if="index === forms.formulas.length - 1"
                  type="primary"
                  size="small"
                  @click="commEvent.copyFormula(formula)"
                >
                  复制
                </el-button>
                <el-button type="danger" plain size="small" @click="commEvent.deleteFormula(formula)"> 删除 </el-button>
              </div>
            </div>
            <el-alert v-if="formula.items.length >= 8" type="warning" :closable="false" class="formula-warning">
              <span>配方最多支持添加8种溶质</span>
            </el-alert>
            <el-table :data="formula.items" border class="formula-table">
              <el-table-column label="溶质名称" align="center" width="200">
                <template #default="{ row }">
                  <el-input v-model="row.name" placeholder="请输入溶质名称" />
                </template>
              </el-table-column>
              <el-table-column label="配液浓度(mg/ml)" align="center">
                <template #default="{ row }">
                  <el-input-number v-model="row.concentration" :min="0" :precision="2" controls-position="right" class="w-full" />
                </template>
              </el-table-column>
              <el-table-column label="当前库存(mg/ml)" align="center" width="200">
                <template #default="{ row }">
                  <el-input-number v-model="row.stock" :min="0" :precision="2" controls-position="right" class="w-full" />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="240">
                <template #default="{ row, $index }">
                  <el-button
                    v-if="$index === formula.items.length - 1"
                    type="primary"
                    link
                    size="small"
                    :disabled="formula.items.length >= 8"
                    @click="commEvent.addFormulaItem(formula)"
                  >
                    新增
                  </el-button>
                  <el-button
                    v-if="$index === formula.items.length - 1"
                    type="primary"
                    link
                    size="small"
                    :disabled="formula.items.length >= 8"
                    @click="commEvent.copyFormulaItem(formula, row)"
                  >
                    复制
                  </el-button>
                  <el-button type="danger" link size="small" @click="commEvent.deleteFormulaItem(formula, row)"> 删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
      <!-- 喷涂/烧结 -->
      <el-card v-if="forms.sampleType.includes('2')" class="spray-card">
        <div class="spray-header">
          <span>喷涂/烧结：</span>
          <el-button type="primary" size="small" @click="commEvent.addSprayItem">新增</el-button>
        </div>
        <el-table :data="forms.sprayData" border class="spray-table">
          <el-table-column label="配方名称" align="center" width="200">
            <template #default="{ row }">
              <el-select v-model="row.formulaId" placeholder="请选择配方" class="w-full">
                <el-option
                  v-for="(formula, index) in forms.formulas"
                  :key="formula.id"
                  :label="formula.soluteName || `配方${index + 1}`"
                  :value="formula.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="单次喷涂量" align="center" width="120">
            <template #default="{ row }">
              <el-input-number v-model="row.sprayAmount" :min="0" :precision="2" controls-position="right" class="w-full" />
            </template>
          </el-table-column>
          <el-table-column label="喷涂次数" align="center" width="110">
            <template #default="{ row }">
              <el-input-number v-model="row.sprayTimes" :min="0" :precision="0" controls-position="right" class="w-full" />
            </template>
          </el-table-column>
          <el-table-column label="喷涂工艺" align="center" width="120">
            <template #default="{ row }">
              <el-input-number
                v-model="row.sprayProcess"
                :min="1000"
                :max="3999"
                :precision="0"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="短效烧结加热温度(℃)" align="center" width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.shortSinterTemp" :min="0" :precision="0" controls-position="right" class="w-full" />
            </template>
          </el-table-column>
          <el-table-column label="短效烧结加热时长(min)" align="center" width="190">
            <template #default="{ row }">
              <el-input-number
                v-model="row.shortSinterHeatTime"
                :min="0"
                :precision="0"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="短效烧结冷却时长(min)" align="center" width="190">
            <template #default="{ row }">
              <el-input-number
                v-model="row.shortSinterCoolTime"
                :min="0"
                :precision="0"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否长效烧结" align="center" width="130">
            <template #default="{ row }">
              <el-select v-model="row.isLongSinter" placeholder="请选择" class="w-full">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="长效烧结加热温度(℃)" align="center" width="180">
            <template #default="{ row }">
              <el-input-number
                v-model="row.longSinterTemp"
                :min="0"
                :precision="0"
                :disabled="row.isLongSinter !== '1'"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="长效烧结加热时长(min)" align="center" width="190">
            <template #default="{ row }">
              <el-input-number
                v-model="row.longSinterHeatTime"
                :min="0"
                :precision="0"
                :disabled="row.isLongSinter !== '1'"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="长效烧结冷却时长(min)" align="center" width="190">
            <template #default="{ row }">
              <el-input-number
                v-model="row.longSinterCoolTime"
                :min="0"
                :precision="0"
                :disabled="row.isLongSinter !== '1'"
                controls-position="right"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180" fixed="right">
            <template #default="{ row, $index }">
              <el-button type="primary" link size="small" @click="commEvent.copySprayItem(row)">复制</el-button>
              <el-button type="danger" link size="small" @click="commEvent.deleteSprayItem($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- EDX检测设备 -->
      <el-card v-if="forms.sampleType.includes('3')" class="device-card">
        <div class="device-header">
          <span>EDX检测设备：</span>
        </div>
        <div class="device-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="device-item">
                <span class="device-label">定性/定量：</span>
                <el-select v-model="forms.edxQualitative" placeholder="请选择" class="device-select" clearable>
                  <el-option label="定性" value="1" />
                  <el-option label="定量" value="2" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="device-item">
                <span class="device-label">组别：</span>
                <el-select v-model="forms.edxGroup" placeholder="请选择" class="device-select" clearable>
                  <el-option label="系统组" value="1" />
                  <el-option label="用户组" value="2" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="device-item">
                <span class="device-label">检测工艺编号：</span>
                <el-select v-model="forms.edxProcessNo" placeholder="请选择" class="device-select" clearable>
                  <el-option label="工艺1" value="1" />
                  <el-option label="工艺2" value="2" />
                  <el-option label="工艺3" value="3" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <!-- 电化学检测设备 -->
      <el-card v-if="forms.sampleType.includes('4')" class="device-card">
        <div class="device-header">
          <span>电化学检测设备：</span>
        </div>
        <div class="device-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="device-item">
                <span class="device-label">检测方法编号：</span>
                <el-select v-model="forms.electrochemicalMethod" placeholder="请选择" class="device-select" clearable>
                  <el-option label="方法1" value="1" />
                  <el-option label="方法2" value="2" />
                  <el-option label="方法3" value="3" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <!-- 操作 -->
      <el-row justify="center" class="mt20">
        <el-button @click="commEvent.onCancel">取 消</el-button>
        <el-button type="primary" @click="commEvent.onSave">保 存</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import type { CheckboxValueType } from "element-plus"
import { CHANNEL_OPTIONS } from "@/config"

const router = useRouter()
// 参数
// 表单数据
const forms = ref({
  sampleType: [] as string[],
  channel: "",
  formulas: [
    {
      id: "f-001",
      soluteName: "",
      hasDuplicate: false,
      items: [{ id: "f-001-1", name: "", concentration: 40, stock: 0 }]
    }
  ],
  sprayData: [
    {
      id: "s-001",
      formulaId: "",
      sprayAmount: 0,
      sprayTimes: 0,
      sprayProcess: 0,
      shortSinterTemp: 0,
      shortSinterHeatTime: 0,
      shortSinterCoolTime: 0,
      isLongSinter: "0",
      longSinterTemp: 0,
      longSinterHeatTime: 0,
      longSinterCoolTime: 0
    }
  ],
  edxQualitative: "",
  edxGroup: "",
  edxProcessNo: "",
  electrochemicalMethod: "",
  mockArr: [
    { id: "001", isSpray: "", children: [{ id: "001-1" }] },
    { id: "002", isSpray: "", children: [{ id: "002-1" }, { id: "002-2" }, { id: "002-3" }] }
  ]
})

// 计算属性：是否显示通道选择
const showChannelSelect = computed(() => {
  return forms.value.sampleType.includes("1") || forms.value.sampleType.includes("2")
})

// 模拟的余量数据（实际应该从后端获取）
// TODO: 实际使用时，应该在页面加载时从后端API获取最新的溶液库存数据
// 例如：const stockData = await fetchStockData()
const stockData = ref<Record<string, { name: string; stock: number }>>({
  "1": { name: "溶液1", stock: 100 }, // 溶液1的库存
  "2": { name: "溶液2", stock: 50 }, // 溶液2的库存
  "3": { name: "溶液3", stock: 30 } // 溶液3的库存
})

// 计算指定溶质的已使用量
const calculateUsedAmount = (formulaId: string, itemIndex: number) => {
  let totalUsed = 0
  forms.value.formulas.forEach(formula => {
    if (formula.id === formulaId && formula.items[itemIndex]) {
      totalUsed += formula.items[itemIndex].concentration || 0
    }
  })
  return totalUsed
}

// 计算指定溶质的剩余库存
const calculateRemainingStock = (formulaId: string, itemIndex: number) => {
  // TODO: 实际使用时，应该从后端获取对应溶质的初始库存
  // 例如：const initialStock = stockData.value[soluteId]?.solutes[itemIndex]?.stock || 0
  const initialStock = 50
  const used = calculateUsedAmount(formulaId, itemIndex)
  return initialStock - used
}

// 获取库存标签类型
const getStockTagType = (remaining: number) => {
  if (remaining > 30) return "success"
  if (remaining > 10) return "warning"
  return "danger"
}

// 事件
const commEvent = {
  // 新增
  onAdd: () => {
    const _id = Date.now().toFixed(0)
    const _obj = { id: _id, isSpray: "", children: [{ id: _id + "-1" }] }
    forms.value.mockArr = [...forms.value.mockArr, _obj]
  },
  // 复制
  onCopy: (item: any) => {
    const _id = Date.now().toFixed(0)
    const _child = item.children.map((item: any, index: number) => ({
      ...item,
      id: `${_id}-${index + 1}`
    }))
    const _obj = { id: _id, isSpray: "", children: _child }
    forms.value.mockArr = [...forms.value.mockArr, _obj]
  },
  // 删除
  onDelete: (item: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    forms.value.mockArr = copyData.filter(val => val.id !== item.id)
  },
  // 新增子元素
  childAdd: (item: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    copyData.forEach(val => {
      if (val.id === item.id) {
        const _obj = { id: `${item.id}-${val.children.length + 1}` }
        val.children = [...val.children, _obj]
      }
    })
    forms.value.mockArr = copyData
  },
  // 删除子元素
  childDelete: (item: any, n: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    copyData.forEach(val => {
      if (val.id === item.id) {
        val.children = val.children.filter((el: any) => el.id !== n.id)
      }
    })
    forms.value.mockArr = copyData
  },
  // 复制子元素
  childCopy: (item: any, n: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    copyData.forEach(val => {
      if (val.id === item.id) {
        const _obj = { ...n, id: `${item.id}-${val.children.length + 1}` }
        val.children = [...val.children, _obj]
      }
    })
    forms.value.mockArr = copyData
  },
  // 返回上一页
  goBack: () => {
    router.back()
  },
  // 处理样品类型变化（连选逻辑）
  handleSampleTypeChange: (value: CheckboxValueType[]) => {
    // 如果没有选择，直接返回
    if (value.length === 0) {
      return
    }

    // 将选中的值转为数字并排序
    const selectedNumbers = value.map(v => parseInt(String(v))).sort((a, b) => a - b)

    // 检查是否连续
    let isContinuous = true
    for (let i = 1; i < selectedNumbers.length; i++) {
      if (selectedNumbers[i] - selectedNumbers[i - 1] !== 1) {
        isContinuous = false
        break
      }
    }

    // 如果不连续，重置为之前的值（只保留第一个和最后一个之间的连续值）
    if (!isContinuous) {
      const min = selectedNumbers[0]
      const max = selectedNumbers[selectedNumbers.length - 1]
      const continuousValues: string[] = []
      for (let i = min; i <= max; i++) {
        continuousValues.push(i.toString())
      }
      forms.value.sampleType = continuousValues
      ElMessage.warning("样品类型必须连续选择")
    }
  },
  // 新增配方
  addFormula: () => {
    const _id = `f-${Date.now()}`
    const _obj = {
      id: _id,
      soluteName: "",
      hasDuplicate: false,
      items: [{ id: `${_id}-1`, name: "", concentration: 0, stock: 0 }]
    }
    forms.value.formulas = [...forms.value.formulas, _obj]
  },
  // 复制配方
  copyFormula: (formula: any) => {
    const _id = `f-${Date.now()}`
    const _items = formula.items.map((item: any, index: number) => ({
      ...item,
      id: `${_id}-${index + 1}`
    }))
    const _obj = {
      id: _id,
      soluteName: formula.soluteName,
      hasDuplicate: false,
      items: _items
    }
    forms.value.formulas = [...forms.value.formulas, _obj]
  },
  // 删除配方
  deleteFormula: (formula: any) => {
    forms.value.formulas = forms.value.formulas.filter(f => f.id !== formula.id)
  },
  // 新增配方项
  addFormulaItem: (formula: any) => {
    if (formula.items.length >= 8) {
      ElMessage.warning("单配方最多只能添加8种溶质")
      return
    }
    const _id = `${formula.id}-${formula.items.length + 1}`
    formula.items.push({ id: _id, name: "", concentration: 0, stock: 0 })
  },
  // 复制配方项
  copyFormulaItem: (formula: any, item: any) => {
    if (formula.items.length >= 8) {
      ElMessage.warning("单配方最多只能添加8种溶质")
      return
    }
    const _id = `${formula.id}-${formula.items.length + 1}`
    formula.items.push({ ...item, id: _id })
  },
  // 删除配方项
  deleteFormulaItem: (formula: any, item: any) => {
    formula.items = formula.items.filter((i: any) => i.id !== item.id)
  },
  // 新增喷涂/烧结项
  addSprayItem: () => {
    const _id = `s-${Date.now()}`
    forms.value.sprayData.push({
      id: _id,
      formulaId: "",
      sprayAmount: 0,
      sprayTimes: 0,
      sprayProcess: 0,
      shortSinterTemp: 0,
      shortSinterHeatTime: 0,
      shortSinterCoolTime: 0,
      isLongSinter: "0",
      longSinterTemp: 0,
      longSinterHeatTime: 0,
      longSinterCoolTime: 0
    })
  },
  // 复制喷涂/烧结项
  copySprayItem: (item: any) => {
    const _id = `s-${Date.now()}`
    forms.value.sprayData.push({ ...item, id: _id })
  },
  // 删除喷涂/烧结项
  deleteSprayItem: (index: number) => {
    if (forms.value.sprayData.length <= 1) {
      ElMessage.warning("至少保留一条数据")
      return
    }
    forms.value.sprayData.splice(index, 1)
  },
  // 校验参数信息
  validateParams: () => {
    const errors: string[] = []

    // 1. 校验样品类型
    if (forms.value.sampleType.length === 0) {
      errors.push("样品类型")
    }

    // 2. 校验通道（只有选择配液或喷涂/烧结时才需要校验）
    if (showChannelSelect.value && !forms.value.channel) {
      errors.push("通道选择")
    }

    // 3. 校验配方参数
    if (forms.value.formulas.length === 0) {
      errors.push("配方参数")
    } else {
      forms.value.formulas.forEach((formula, index) => {
        if (!formula.soluteName) {
          errors.push(`配方${index + 1}的溶液名称`)
        }
      })
    }

    // 4. 根据样品类型校验对应的设备参数
    if (forms.value.sampleType.includes("3")) {
      // XRF检测需要校验EDX设备
      if (!forms.value.edxQualitative) {
        errors.push("EDX定性/定量")
      }
      if (!forms.value.edxGroup) {
        errors.push("EDX组别")
      }
      if (!forms.value.edxProcessNo) {
        errors.push("EDX检测工艺编号")
      }
    }

    if (forms.value.sampleType.includes("4")) {
      // 组装+电化学检测需要校验电化学设备
      if (!forms.value.electrochemicalMethod) {
        errors.push("电化学检测方法编号")
      }
    }

    return errors
  },
  // 校验配方余量
  validateStock: () => {
    const insufficientStock: string[] = []
    const soluteUsageMap: Record<string, { total: number; details: Array<{ formulaIndex: number; amount: number }> }> = {}

    // 统计每种溶质的需求量
    forms.value.formulas.forEach((formula, formulaIndex) => {
      if (formula.soluteName) {
        formula.items.forEach((item, itemIndex) => {
          const key = `${formula.soluteName}-${itemIndex}`
          const requiredAmount = item.concentration || 0

          if (!soluteUsageMap[key]) {
            soluteUsageMap[key] = { total: 0, details: [] }
          }
          soluteUsageMap[key].total += requiredAmount
          soluteUsageMap[key].details.push({ formulaIndex: formulaIndex + 1, amount: requiredAmount })
        })
      }
    })

    // 检查库存（这里简化处理，实际应该从后端获取每个溶质的库存）
    Object.entries(soluteUsageMap).forEach(([key, usage]) => {
      const [soluteId, itemIndex] = key.split("-")
      const soluteName = stockData.value[soluteId]?.name || "溶液"
      const soluteFullName = `${soluteName}的溶质${parseInt(itemIndex) + 1}`

      // 假设每个溶质的库存是固定值，这里用 50 作为示例
      // 实际应该从后端获取：const availableStock = stockData.value[soluteId]?.solutes[itemIndex]?.stock || 0
      const availableStock = 50

      if (usage.total > availableStock) {
        const formulaList = usage.details.map(d => `配方${d.formulaIndex}(${d.amount})`).join("、")
        const msg = `${soluteFullName}（需求总量：${usage.total}，当前库存：${availableStock}，使用配方：${formulaList}）`
        insufficientStock.push(msg)
      }
    })

    return insufficientStock
  },
  // 保存
  onSave: () => {
    // 校验参数信息
    const paramErrors = commEvent.validateParams()
    if (paramErrors.length > 0) {
      const errorMsg =
        paramErrors.length > 3
          ? `请完善以下参数信息：<br/>${paramErrors.map(e => `• ${e}`).join("<br/>")}`
          : `请完善以下参数信息：${paramErrors.join("、")}`

      ElMessage({
        type: "error",
        message: errorMsg,
        duration: 5000,
        dangerouslyUseHTMLString: true
      })
      return
    }

    // 校验配方余量
    const stockErrors = commEvent.validateStock()
    if (stockErrors.length > 0) {
      const errorMsg = `以下配方余量不足，无法保存：<br/>${stockErrors.map(e => `• ${e}`).join("<br/>")}`

      ElMessage({
        type: "error",
        message: errorMsg,
        duration: 6000,
        dangerouslyUseHTMLString: true
      })
      return
    }

    // 所有校验通过，执行保存逻辑
    ElMessage.success("保存成功")
    // TODO: 调用后端接口保存数据
    // 例如: await saveExperimentData(forms.value)
  },
  // 取消
  onCancel: () => {
    router.back()
  }
}
</script>

<style lang="scss" scoped>
.experiment-detail-box {
  width: 100%;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    .back-button {
      padding: 8px 20px;
      font-size: 14px;
      color: #606266;
      background: #ffffff;
      border: 1px solid #dcdfe6;
      border-radius: 20px;
      transition: all 0.3s;
      &:hover {
        color: var(--el-color-primary);
        background: rgb(64 158 255 / 5%);
        border-color: var(--el-color-primary);
      }
    }
  }
  .sample-card {
    margin-bottom: 24px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
    :deep(.el-card__body) {
      padding: 0;
    }
    .sample-header {
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }
    .sample-content {
      padding: 20px;
      .sample-radio-group {
        display: flex;
        gap: 24px;
        margin-bottom: 20px;
        :deep(.el-radio) {
          margin-right: 0;
          .el-radio__label {
            font-size: 14px;
            color: #606266;
          }
          &.is-checked .el-radio__label {
            color: var(--el-color-primary);
          }
        }
      }
      .sample-select-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .select-label {
          flex-shrink: 0;
          margin-right: 12px;
          font-size: 14px;
          color: #606266;
        }
        .select-input {
          width: 200px;
        }
      }
      .sample-alert {
        :deep(.el-alert__content) {
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
  .formula-card {
    margin-bottom: 24px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
    :deep(.el-card__body) {
      padding: 0;
    }
    .formula-header {
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }
    .formula-content {
      padding: 20px;
      .formula-item {
        margin-bottom: 24px;
        &:last-child {
          margin-bottom: 0;
        }
        .formula-title-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12px;
          .formula-select-wrapper {
            display: flex;
            gap: 12px;
            align-items: center;
            .formula-number {
              flex-shrink: 0;
              padding: 4px 12px;
              font-size: 14px;
              font-weight: 600;
              color: #606266;
            }
            .formula-label {
              flex-shrink: 0;
              font-size: 14px;
              color: #606266;
            }
            .formula-select {
              width: 200px;
            }
          }
          .formula-actions {
            display: flex;
            gap: 8px;
          }
        }
        .formula-warning {
          margin-bottom: 12px;
          :deep(.el-alert__content) {
            font-size: 14px;
            line-height: 1.6;
          }
        }
        .formula-table {
          :deep(.el-table__header) {
            th {
              font-weight: 600;
              color: #606266;
              background: #f5f7fa;
            }
          }
          :deep(.el-table__body) {
            td {
              padding: 12px 0;
            }
          }
        }
      }
    }
  }
  .spray-card {
    margin-bottom: 24px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
    :deep(.el-card__body) {
      padding: 0;
    }
    .spray-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }
    .spray-table {
      margin: 20px;
      :deep(.el-table__header) {
        th {
          font-weight: 600;
          color: #303133;
          background-color: #f5f7fa;
        }
      }
      :deep(.el-table__body) {
        tr {
          &:hover > td {
            background-color: #f5f7fa !important;
          }
        }
        td {
          padding: 12px 0;
        }
      }
      :deep(.el-input-number) {
        width: 100%;
        .el-input__wrapper {
          padding: 1px 8px;
        }
      }
    }
  }
  .device-card {
    margin-bottom: 24px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
    :deep(.el-card__body) {
      padding: 0;
    }
    .device-header {
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
    }
    .device-content {
      padding: 20px;
      .device-item {
        display: flex;
        align-items: center;
        .device-label {
          flex-shrink: 0;
          margin-right: 12px;
          font-size: 14px;
          color: #606266;
          white-space: nowrap;
        }
        .device-select {
          flex: 1;
        }
      }
      .device-alert {
        margin-top: 16px;
        :deep(.el-alert__content) {
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
  .detail-title {
    display: flex;
    gap: 5px;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    font-size: 18px;
    color: #111111;
  }
  .detail-config {
    width: 100%;
    &:nth-child(n + 3) {
      margin-top: 30px;
    }
    .config-title {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      font-size: 16px;
      color: #111111;
    }
    .config-content {
      width: 100%;
      .list-title {
        font-size: 14px;
        font-weight: bold;
        color: #111111;
      }
      .child-item:nth-child(n + 3) {
        margin-top: 10px;
      }
    }
  }
  .config-list {
    display: flex;
    align-items: center;
    width: 100%;
    .list-label {
      flex-shrink: 0;
      font-size: 14px;
    }
    .list-value {
      flex: 1;
    }
  }
}
</style>
